<template>
  <a-spin :spinning="confirmLoading">
    <!-- 启用状态不允许删除 -->
    <div class="table-operator" v-if="model.ableStatus != '2'">
      <a-button @click="addDetail('')" type="primary" icon="plus">创建重量段</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('物流重量段明细模板',url.downloadTemplate)">下载模板</a-button>
      <a-upload name="file" :data="queryParam" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
      <a-button @click="addDetail('批量填写计费单重')" type="primary" style="float: right;" :disabled="!selectedRowKeys.length">批量填写计费单重</a-button>
    </div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="model.ableStatus === '2' ? null : {selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)" v-if="model.ableStatus != '2'">编辑</a>
        <a-divider type="vertical" v-if="model.ableStatus != '2'" />
        <span v-if="model.ableStatus != '2'">
           <a @click="handleDel(record)">删除</a>
        </span>
      </span>
    </a-table>
    <logistics-weight-range-detail-modal ref="modalForm" @ok="modalFormOk"></logistics-weight-range-detail-modal>
  </a-spin>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction, deleteAction } from '@/api/manage'
  import LogisticsWeightRangeDetailModal from '@views/logistics/weight/modules/LogisticsWeightRangeDetailModal.vue'
  export default {
    name: 'LogisticsWeightRangeDetailList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      LogisticsWeightRangeDetailModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        disableMixinCreated : true,
        confirmLoading: false,
        validatorRules: {
           title: [
              { required: true, message: '请输入重量段标题!'},
           ],
           chargeType: [
              { required: true, message: '请输入计费类型!'},
           ],
           startWeight: [
              { required: true, message: '请输入开始重量!'},
           ],
           endWeight: [
              { required: true, message: '请输入结束重量!'},
           ],
           chargeWeight: [
              { required: true, message: '请输入计费单重!'},
           ],
        },
        columns : [
          {
            title: '重量段标题',
            align:"center",
            dataIndex: 'title',
          },
          {
            title: '计费类型',
            align:"center",
            dataIndex: 'chargeType_dictText',
          },
          {
            title: '开始重量段（KG)',
            align:"center",
            dataIndex: 'startWeight',
          },
          {
            title: '结束重量段（KG)',
            align:"center",
            dataIndex: 'endWeight',
          },
          {
            title: '最低计费重（KG)',
            align:"center",
            dataIndex: 'minChargeWeight',
          },
          {
            title: '计费单重（KG)',
            align:"center",
            dataIndex: 'chargeWeight',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' }
          }
        ],
        // queryParam:{},
        // dataSource:[],
        url: {
          add: "/logistics/weightDetail/logisticsWeightRangeDetail/add",
          list: "/logistics/weightDetail/logisticsWeightRangeDetail/list",
          edit: "/logistics/weightDetail/logisticsWeightRangeDetail/edit",
          delete: "/logistics/weightDetail/logisticsWeightRangeDetail/delete",
          queryById: "/logistics/weightDetail/logisticsWeightRangeDetail/queryById",
          deleteBatch: "/logistics/weightDetail/logisticsWeightRangeDetail/deleteBatch",
          downloadTemplate: "/logistics/weightDetail/logisticsWeightRangeDetail/downloadTemplate",
          importExcelUrl: "logistics/weightDetail/logisticsWeightRangeDetail/importExcel"
        },
        isorter:{
          column: 'createTime',
          order: 'asc',
        },
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.queryParam.weightRangeId = record.id;
        this.model = Object.assign({}, record);
        this.visible = true;
        this.loadData();
        if(this.model.ableStatus === '2'){
          this.columns.pop();
        }
      },
      addDetail: function (title) {
        this.$refs.modalForm.add(this.model.id);
        this.$refs.modalForm.title = title || "新增";
        this.$refs.modalForm.disableSubmit = false;
        this.$refs.modalForm.dataSource = this.dataSource;
        if(title){
          this.$refs.modalForm.selectedRowKeys = this.selectedRowKeys;
        }
      },
      handleEdit(record){
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
        this.$refs.modalForm.dataSource = this.dataSource;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            console.log("提交时model 中id："+JSON.stringify(this.model));

            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      handleDel(record){
        const that = this
        that.$confirm({
          title:'删除重量段',
          content: (
            <div>
              <div style="color: red">将影响关联物流渠道运费计算，且无法恢复</div>
              <div>请确认</div>
            </div>
          ),
          onOk() {
            that.handleDelete(record.id);
          },
          onCancel() {  },
        });
      }
    }
  }
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>